body {}

.halo {
	transition: .4s all;
	left: 25%;
	top: 95px;
	width: 50vw;
	height: 50vw;
}

.halo.input {
	width: 100px;
	height: 100px;
}

.halo.input:before {
	width: 100px;
	height: 100px;
}

.ring-1 {
	position: absolute;
	transform: translate3d(-50%, -50%, 0);
	border: 1px solid rgba(0, 255, 255, 0.3);
	box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
	border-radius: 100%;
	-webkit-transform: scale(1);
	-webkit-animation: rotate 3.5s infinite alternate-reverse;
}

.ring-1:before {
	content: "";
	position: absolute;
	border-radius: 100%;
	border: 1px solid rgba(0, 255, 255, 0.3);
	box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
	-webkit-animation: rotate 3.5s infinite alternate-reverse;
}

.ring-2 {
	position: absolute;
	transform: translate3d(-50%, -50%, 0);
	border: 1px solid rgba(0, 255, 255, 0.3);
	box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
	border-radius: 100%;
	-webkit-transform: scale(1);
	-webkit-animation: rotate 2s infinite alternate;
}

.ring-2:before {
	content: "";
	position: absolute;
	border-radius: 100%;
	border: 1px solid rgba(0, 255, 255, 0.3);
	box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
	-webkit-animation: rotate 3.5s infinite alternate-reverse;
}

.ring-3 {
	position: absolute;

	transform: translate3d(-50%, -50%, 0);
	border: 1px solid rgba(0, 255, 255, 0.3);
	box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
	border-radius: 100%;

	-webkit-transform: scale(1);
	-webkit-animation: rotate-2 4s infinite alternate;
}

.ring-3:before {
	content: "";
	position: absolute;

	border-radius: 100%;
	border: 1px solid rgba(0, 255, 255, 0.3);
	box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
	-webkit-animation: rotate 3.5s infinite alternate-reverse;
}

.ring-4 {
	position: absolute;

	transform: translate3d(-50%, -50%, 0);
	border: 1px solid rgba(0, 255, 255, 0.3);
	box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
	border-radius: 100%;

	-webkit-transform: scale(1);
	-webkit-animation: rotate 7s infinite alternate-reverse;
}

.ring-4:before {
	content: "";
	position: absolute;

	border-radius: 100%;
	border: 1px solid rgba(0, 255, 255, 0.3);
	box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
	-webkit-animation: rotate 3.5s infinite alternate-reverse;
}

/*.ring-5 {
	position: absolute;

	transform: translate3d(-50%, -50%, 0);
	border: 1px solid rgba(255, 0, 255, 0.3);
	box-shadow: 0 0 20px rgba(255, 0, 255, 0.1), 0 0 50px rgba(255, 0, 255, 0.1), inset 0 0 20px rgba(255, 0, 255, 0.1), inset 0 0 50px rgba(255, 0, 255, 0.1);
	border-radius: 100%;

	-webkit-transform: scale(1);
	-webkit-animation: rotate-2 5s infinite alternate;
}

.ring-5:before {
	content: "";
	position: absolute;

	border-radius: 100%;
	border: 1px solid rgba(255, 0, 255, 0.3);
	box-shadow: 0 0 20px rgba(255, 0, 255, 0.1), 0 0 50px rgba(255, 0, 255, 0.1), inset 0 0 20px rgba(255, 0, 255, 0.1), inset 0 0 50px rgba(255, 0, 255, 0.1);
	-webkit-animation: rotate 3.5s infinite alternate-reverse;
}

.ring-6 {
	position: absolute;

	transform: translate3d(-50%, -50%, 0);
	border: 1px solid rgba(0, 255, 255, 0.3);
	box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
	border-radius: 100%;

	-webkit-transform: scale(1);
	-webkit-animation: rotate 2s infinite alternate-reverse;
}

.ring-6:before {
	content: "";
	position: absolute;

	border-radius: 100%;
	border: 1px solid rgba(0, 255, 255, 0.3);
	box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
	-webkit-animation: rotate 3.5s infinite alternate-reverse;
}

.ring-7 {
	position: absolute;

	transform: translate3d(-50%, -50%, 0);
	border: 1px solid rgba(0, 255, 255, 0.3);
	box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
	border-radius: 100%;

	-webkit-transform: scale(1);
	-webkit-animation: rotate-2 5s infinite alternate;
}

.ring-7:before {
	content: "";
	position: absolute;

	border-radius: 100%;
	border: 1px solid rgba(0, 255, 255, 0.3);
	box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
	-webkit-animation: rotate 3.5s infinite alternate-reverse;
}

.ring-8 {
	position: absolute;

	transform: translate3d(-50%, -50%, 0);
	border: 1px solid rgba(255, 0, 255, 0.3);
	box-shadow: 0 0 20px rgba(255, 0, 255, 0.1), 0 0 50px rgba(255, 0, 255, 0.1), inset 0 0 20px rgba(255, 0, 255, 0.1), inset 0 0 50px rgba(255, 0, 255, 0.1);
	border-radius: 100%;

	-webkit-transform: scale(1);
	-webkit-animation: rotate 10s infinite alternate-reverse;
}

.ring-8:before {
	content: "";
	position: absolute;

	border-radius: 100%;
	border: 1px solid rgba(255, 0, 255, 0.3);
	box-shadow: 0 0 20px rgba(255, 0, 255, 0.1), 0 0 50px rgba(255, 0, 255, 0.1), inset 0 0 20px rgba(255, 0, 255, 0.1), inset 0 0 50px rgba(255, 0, 255, 0.1);
	-webkit-animation: rotate 3.5s infinite alternate-reverse;
}*/

@-webkit-keyframes rotate {
	0% {
		-webkit-transform: rotate(360deg) scaleX(1);
	}
	100% {
		-webkit-transform: rotate(0deg) scaleX(1.1);
	}
}

@-webkit-keyframes rotate-2 {
	0% {
		-webkit-transform: rotate(360deg) scaleX(0.9);
	}
	100% {
		-webkit-transform: rotate(90deg) scaleX(1.1);
	}
}